<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{title}}</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic,bold" rel="stylesheet">
        <link href="static/bootstrap.min.css" rel="stylesheet">
        <link href="static/bootstrap-responsive.min.css" rel="stylesheet">
        <link href="static/spoon.css" rel="stylesheet">
        <script src="static/jquery.min.js"></script>
        <script src="static/bootstrap.min.js"></script>
        <meta name="description" content="{{subtitle}}">
    </head>
    <body>
        <div class="container">
            <div class="hero-unit">
                <h1>{{title}}</h1>
                <p>{{subtitle}}</p>
            </div>
            <div class="row">
                <div class="span12">
                    <table class="birds-eye">
                        <tbody>
                            {{#devices}}
                            <tr class="device">
                                <th colspan="{{testCount}}">
                                    <a href="device/{{serial}}.html">{{name}}</a>
                                </th>
                            </tr>
                            {{#getException}}
                            <tr class="result">
                                <td colspan="{{testCount}}" class="test error">
                                    <a href="device/{{serial}}.html">&nbsp;</a>
                                </td>
                            </tr>
                            {{/getException}}
                            {{^getException}}
                            <tr class="result">
                                {{#testResults}}
                                <td class="test {{status}}">
                                    <a href="device/{{serial}}.html#{{testId}}" data-original-title="{{classSimpleName}}" data-content="{{prettyMethodName}}">&nbsp;</a>
                                </td>
                                {{/testResults}}
                                {{#executionFailed}}
                                <td class="test error" colspan="{{testCount}}">
                                    <a href="device/{{serial}}.html">&nbsp;</a>
                                </td>
                                {{/executionFailed}}
                            </tr>
                            {{/getException}}
                            {{/devices}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            $('.test a').popover({
                placement: 'top',
                trigger: 'hover'
            });
        </script>
    </body>
</html>
